<template>
	<view class="uni-flex-column container">
		<view class="address-list">
			<view class="item uni-flex uni-justify-between" v-for="(item, index) in addressList" :key="index"
				@click="selectAddress(item)">
				<view cl uni-flex-column>
					<text class="address">{{ item.landmark + item.doorNumber }}</text>
					<view class="info">
						<text class="name">{{ item.contacts }}</text>
						<text class="sex">{{ item.sex == 0 ? "先生" : "女士" }}</text>
						<text class="mobile">{{ item.phone }}</text>
					</view>
				</view>
				<view class="icon">
					<image :src="`${$ImgBaseUrl}address_delete.png`" mode="widthFix"
						@click.stop="deleteAddress(item.id)" />
					<image :src="`${$ImgBaseUrl}address_edit.png`" mode="widthFix" @click.stop="updateAddress(item)" />
				</view>
			</view>
		</view>

		<view class="addAddress" @click="addAddress">新增地址</view>
	</view>
</template>

<script setup>
	import {
		deleteAddressBook,
		addressBookList
	} from "@/api/address.js";
	import {
		onMounted,
		ref,
		getCurrentInstance
	} from "vue";
	const eventChannel = getCurrentInstance().proxy.getOpenerEventChannel();
	const addressList = ref([]);
	const addAddress = () => {
		uni.navigateTo({
			url: "/pages/tabBars/serviceAddress/addAddress",
			events: {
				// 定义接收事件,添加地址成功刷新页面
				acceptDataFromPageB: (data) => {
					console.log(data);
					getAddressList();
				},
			},
		});
	};
	const getAddressList = () => {
		addressBookList().then((res) => {
			if (res.code === 200) {
				addressList.value = res.data;
			}
		});
	};
	const deleteAddress = (id) => {
		uni.showModal({
			title: "删除确认",
			content: `确定要删除 吗？删除后不可恢复！`,
			confirmText: "狠心删除",
			cancelText: "我再想想",
			success: (res) => {
				if (res.confirm) {
					deleteAddressBook(id).then((res) => {
						if (res.code === 200) {
							uni.showToast({
								title: "删除成功",
								icon: "success",
								duration: 2000,
							});
							getAddressList();
						}
					});
				}
			},
		});
	};
	const updateAddress = (item) => {
		console.log("updateAddress", item);
		uni.navigateTo({
			url: "/pages/tabBars/serviceAddress/addAddress",
			events: {
				// 定义接收事件,添加地址成功刷新页面
				acceptDataFromPageB: (data) => {
					console.log(data);
					getAddressList();
				},
			},
			success: (res) => {
				// 发送初始数据（可选）
				res.eventChannel.emit("sendDataToPageB", {
					initData: item,
				});
			},
		});
	};
	const selectAddress = (item) => {
		// uni.$emit("acceptDataAddress", item);
		console.log("selectAddress", item);
		uni.setStorageSync('savedAddressId', item.id);
		eventChannel.emit("acceptDataAddress", item);
		uni.navigateBack();
	};
	onMounted(() => {
		getAddressList();
	});
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 24rpx;
		height: 100vh;

		.address-list {
			flex: 1;

			.item {
				padding: 47rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.address {
					font-weight: 500;
					font-size: 32rpx;
					color: #303133;
				}

				.info {
					margin-top: 20rpx;

					.name {
						font-size: 28rpx;
						color: #666666;
					}

					.sex {
						font-size: 28rpx;
						color: #666666;
						margin: 0 40rpx 0 20rpx;
					}

					.mobile {
						font-size: 28rpx;
						color: #666666;
					}
				}

				.icon {
					display: flex;
					align-items: center;

					image {
						width: 34rpx;
						height: 34rpx;
						margin-left: 20rpx;
					}
				}
			}
		}

		.addAddress {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: #2f80ed;
			border-radius: 44px;
			color: white;
			font-weight: 500;
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>